<template>
    <div class="kgo-left-nav-sty" v-bind:style="{height: available_height + 'px' }">
    <left-info></left-info>
    <el-menu default-active="2" class="el-menu-vertical-demo"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-submenu index="1">
            <template slot="title"><img class="mune-icon"  src="../assets/menuLogo/user.png"><span>用户管理</span></template>
                <el-menu-item index="1-1"><img class="mune-icon-small" src="../assets/menuLogo/add.png">新增用户</el-menu-item>
                <el-menu-item index="1-2"><img class="mune-icon-small" src="../assets/menuLogo/update.png">更新资料</el-menu-item>
        </el-submenu>
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
       
  </div>
</template>

<script>
import LeftInfo from './modules/LeftInfo.vue'
export default {
  components: {
    LeftInfo
  },
   data() {
      return {
        available_height:800,
      };
    },
  created:function(){
    this.available_height =  document.body.offsetHeight -60;
  },
  methods: {
    
    }
}
</script>

<style scoped>
.kgo-left-nav-sty{
    width: 205px;
    background-color: #545C64;
}
.mune-icon{
  width:20px;
  height: 20px;
  margin-right: 8px;
}
.mune-icon-small{
  width:15px;
  height: 15px;
  margin-right: 6px;
  margin-bottom: 3px;
}
</style>
